<template>
    <div class="myOrder myFlex">
        <div class="orderList">

            <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" style="height: 100%;overflow-y: auto">

                <!-- 放订单列表 -->
                <el-tab-pane
                        :label="'所有订单列表'"
                        closable
                        :key="'0'"
                >

                    <el-table
                            border
                            ref="mytable"
                            :data="table_data"
                            style="width: 100%;;background-color: gainsboro"
                    >
                        <el-table-column align="center"
                                         :label="'编号'"
                        >
                            <template slot-scope="scope">
                                <span>{{scope.$index}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column
                                align="center"
                                v-for="(item,index,key) in table_columns"
                                :item="item"
                                :key="key"
                                :index="index"
                                :label="item.label"
                        >
                            <template slot-scope="scope">
                                <span>{{table_data[scope.$index].get('time')}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" align="center" width="250px">
                            <template slot-scope="scope">
                                <!-- 全局控制的编辑 -->
                                <div style="display: inline-block;">
                                    <!-- 编辑 -->
                                    <el-button
                                            size="mini"
                                            v-if="!scope.row.edit"
                                            @click="handleDetails(scope.$index)"
                                            type="primary"
                                    >
                                        <span class="el-icon-info"></span>
                                        详情
                                    </el-button>
                                </div>
                                <span>&nbsp;</span>
                                <!-- 全局控制删除 -->
                                <el-button
                                        size="mini"
                                        v-if="is_delete&&scope.row.add==undefined"
                                        :plain="true"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)"
                                >
                                    <span class="el-icon-error"></span>
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>


                </el-tab-pane>

                <!-- 放订单详情 -->
                <el-tab-pane
                        v-for="(item, index) in editableTabs"
                        :key="item.get('name')"
                        :label="item.get('title')"
                        :name="item.get('name')"
                        style="height: 100%"
                >
                    <div style="width: 100%;height: 50vh;background-color: darkgrey;display: flex;justify-content: center;align-items: center">
                        <div style="width: 65%;height:95%;padding: 10px;overflow-y: auto;">
                            <el-table
                                    :data="item.get('content')"
                                    height="s"
                                    style="height: 100%;"
                                    border
                            >
                                <el-table-column label="饮料名称" key="name" align="center">
                                    <template slot-scope="scope">
                                        <span>{{item.get('content')[scope.$index].name}}</span>
                                    </template>
                                </el-table-column>

                                <el-table-column label="下单数量" key="count" align="center">
                                    <template slot-scope="scope">
                                        <span>{{item.get('content')[scope.$index].count}}</span>
                                    </template>
                                </el-table-column>

                                <el-table-column label="冷热选择" key="temperature" align="center">
                                    <template slot-scope="scope">
                                        <span>{{item.get('content')[scope.$index].temperature}}</span>
                                    </template>
                                </el-table-column>

                            </el-table>
                        </div>
                        <div style="width: 35%;height: 90%;background-color: white;margin: 20px;" class="myFlex">
                            <h4 class="myHeader">￥ 订单金额</h4>
                            <span class="mySubContent">{{item.get('total')}}</span>
                            <h4 class="myHeader">￥ 支付金额</h4>
                            <span class="mySubContent">{{item.get('paid')}}</span>
                            <h4 class="myHeader">￥ 本次找零</h4>
                            <span class="mySubContent">{{item.get('change')}}</span>
                            <h4 class="myHeader">
                                <span class="el-icon-alarm-clock"></span>
                                下单时间
                            </h4>
                            <span class="mySubContent">{{item.get('time')}}</span>
                        </div>
                    </div>

                </el-tab-pane>

            </el-tabs>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Orders",
        data() {
            return {
                editableTabsValue: '0',
                editableTabs: [],
                clickedMap:new Map(), //标签页已打开时，直接跳转

                is_delete: true, //是否可删除
                space_color: true, //隔行变色
                //表头信息
                table_columns: [
                    {
                        prop: "time",
                        label: "完成日期",
                        width: "150"
                    }
                ],
                //表格数据
                table_data:[]

            }
        },
        created() {
            this.table_data = this.$store.state.orderList
        },
        mounted: function() {
            //确保方法在页面渲染后调用
            this.$nextTick(function() {
                /////方法
                this.tableRowClassName();
            });
        },
        watch: {
            'editableTabs.length':function(){
                if(this.editableTabs.length===0){
                    this.editableTabsValue = '0'
                }
            },
            space_color: function () {
                //监听数据变化
                this.$nextTick(function () {
                    /////方法
                    this.tableRowClassName();
                });
            },
            table_data: function () {
                //监听数据变化f
                this.$nextTick(function () {
                    /////方法
                    this.tableRowClassName();
                });
            }
        },
        methods: {
            //查看详情
            handleDetails(index){
                if(this.clickedMap.get(index.toString()) === undefined){
                    let newTabName = this.editableTabs.length + 1 + '';
                    let order = this.table_data[index]
                    order.set('title','订单【'+index+'】')
                    order.set('name',newTabName)
                    this.editableTabs.push(order);
                    /* 自动锁定到最新的 tab 页 */
                    this.editableTabsValue = newTabName;
                    this.clickedMap.set(index.toString(),newTabName)
                }else {
                    console.log(index)
                    this.editableTabsValue = this.clickedMap.get(index.toString());
                }
            },

            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.get('name') === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.get('name');
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.get('name') !== targetName);

                //回调函数里的 this 和 外面的 this 不一样的，需要先保存下来
                const _this = this
                this.clickedMap.forEach(function (value, key, map) {
                    console.log(key+' '+value)
                    if(value === targetName){
                        _this.clickedMap.delete(key)
                        return
                    }
                })
            },

            //隔行变色
            tableRowClassName() {
                //选取DOM节点
                var trs = this.$refs.mytable.$el
                    .getElementsByTagName("tbody")[0]
                    .getElementsByTagName("tr");
                for (var i in trs) {
                    if (i % 2 == 0) {
                        //当隔行变色未true时改变颜色
                        if (this.space_color) {
                            trs[i].style.backgroundColor = "#f0f9eb";
                        } else {
                            trs[i].style.backgroundColor = "";
                        }
                    }
                }
            },

            //删除
            handleDelete(index, row) {

                const loading = this.$loading({
                    lock: true,
                    text: '订单删除中',
                    spinner: 'el-icon-loading',
                    target:'.orderList',		//指定 target 即可！
                    background: 'rgba(0, 0, 0, 0.7)'
                });


                //延时跳转
                const _this = this
                setTimeout(() => {
                    loading.close();
                    _this.$message({
                        message: "删除成功！",
                        type: "success",
                        duration:1000
                    });
                    //列表操作
                    _this.table_data.splice(index, 1);
                }, 600);



            }
        }
    }
</script>

<style scoped>

    .myFlex{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .myOrder{
        width: 100%;
        height:100%;
    }

    .orderList{
        width: 90%;
        height: 92%;
        background-color: white;
        border-radius: 20px;
        padding: 20px;
        opacity: 0.9;
    }

    .myHeader{
        background-color: skyblue;
        color: white;
        width: 80%;
        border-radius: 15px;
        text-align: center;
        padding: 10px;
    }

    .mySubContent{
        color: salmon;
        font-family: "DejaVu Sans Mono";
    }

    @media screen and (max-width: 1200px) {
        .orderList{
            width: 100%;
            height: 92%;
            background-color: white;
            border-radius: 20px;
            padding: 15px;
            opacity: 0.9;
        }
    }
</style>